<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-05-19 13:15:01
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-06 09:58:41
-->
<template>
  <div>
    <div class="clearfix font12 paddingTb20">
      <div class="fl">
        <slot />
      </div>
      <div class="fr">
        <span>商品分类：</span>
        <cat-tree-select v-model="dataObj.catId" />
        <el-input
          v-model="dataObj.keywords"
          class="w200"
          clearable
          placeholder="按商品编号,名称,规格,属性"
          @keydown.enter.native="btnSearch"
        />
        <el-checkbox
          v-model="dataObj.isShowZero"
          true-label="0"
          false-label="1"
          border
          type="primary"
        >
          不显示零销售
        </el-checkbox>
        <el-button type="primary" :loading="btnLoading.search" @click="btnSearch()">
          搜索
        </el-button>
      </div>
    </div>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      :loading="tableLoading.report"
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="tableData.report"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>

<script>

import { getMoreButton } from '@/components/Table/oper-btns.js'
import { listSaleGroupByGoods } from '@/api/report/sale.js'
import { oftenuse } from '@/libs/mixins'
import CatTreeSelect from '@/views/components/GoodsCatTreeSelect'
import clonedeep from 'clonedeep'

export default {
  name: 'ReportByGoods',
  components: { CatTreeSelect },
  mixins: [oftenuse],
  props: {
    saleInfo: {
      type: Object,
      default: () => { return {} }
    },
    filterData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      dataObj: { isShowZero: '0', catId: '0' },
      columnsData: [
        { title: '序号', width: 60, fixed: 'left', align: 'center',
          slots: {
            default: (params) => {
              const { seq } = params
              const value = seq
              return [<span>{value}</span>]
            }
          }
        },
        { title: '操作', width: 80, fixed: 'left',
          slots: {
            default: (params) => {
              const h = this.$createElement
              const moreButtonNode = getMoreButton(h, { props: { type: 'default' },
                on: { click: (row) => { this.btnMore(params) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [moreButtonNode])
              return [divNode]
            }
          }
        },
        { field: 'code', title: '商品编号', width: 140 },
        { field: 'name', title: '商品名称', width: 200, showOverflow: true },
        { field: 'unitName', title: '基本单位', width: 80 },
        { field: 'qtyInBase', title: '销售开单量', width: 120 },
        { field: 'amountPayable', title: '销售开单金额', align: 'right', width: 120 },
        { field: 'amountArg', title: '销售均价', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { qtyInBase, amountPayable } = row
              if (qtyInBase === 0) return ['0']
              const value = this.$amount(amountPayable).divide(qtyInBase).format()
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return [
                <el-tooltip effect='dark' content='销售均价 = 销售额 / 销售量' placement='top-end'>
                  <span>销售均价<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        },
        { field: 'grossProfit', title: '销售毛利', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { amountPayable, priceCost, qtyInBase } = row
              const costPriceTotal = priceCost * qtyInBase
              const value = this.$amount(amountPayable).subtract(costPriceTotal).format()
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return [
                <el-tooltip effect='dark' content='销售毛利 = 销售额 - （ 销售量 * 成本价 ）' placement='top-end'>
                  <span>销售毛利<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        },
        { field: 'qtyInBase', title: '销售量', align: 'right', width: 120 },
        { field: 'amountPayable', title: '销售额', align: 'right', width: 120 },
        { field: 'salePer', title: '销售比重', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { amountPayable } = row
              const amountPayableTotal = this.saleInfo.amountPayable || 0
              if (amountPayableTotal === 0) return ['0%']
              const value = (Math.round(amountPayable * 10000 / amountPayableTotal) / 100) + '%'
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'grossProfitSalePer', title: '毛利率', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { amountPayable, priceCost, qtyInBase } = row
              if (amountPayable === 0) return ['0%']
              const costPriceTotal = this.$amount(priceCost).multiply(qtyInBase).format()
              const grossProfit = this.$amount(amountPayable).subtract(costPriceTotal).format()
              const value = (Math.round(grossProfit * 10000 / amountPayable) / 100) + '%'
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'grossProfitPer', title: '毛利比重', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { amountPayable, priceCost, qtyInBase } = row
              const costPriceTotal = this.$amount(priceCost).multiply(qtyInBase).format()
              const grossProfit = this.$amount(amountPayable).subtract(costPriceTotal).format()
              const grossProfitTotal = Number(this.saleInfo.grossProfit) || 0
              if (grossProfitTotal === 0) return ['0%']
              const value = (Math.round(grossProfit * 10000 / grossProfitTotal) / 100) + '%'
              return [<span>{value}</span>]
            },
            header: ({ column }) => {
              return [
                <el-tooltip effect='dark' content='毛利比重 = 该商品销售毛利 / 所有商品销售毛利之和，的百分比' placement='top-end'>
                  <span>毛利比重<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        },
        { field: 'returnQtyInBase', title: '退货量', align: 'right', width: 120 },
        { field: 'returnAmountPayable', title: '退货额', align: 'right', width: 120 },
        { field: 'returnPer', title: '退货率', align: 'right', width: 120,
          slots: {
            default: (params) => {
              const { row } = params
              const { qtyInBase, returnQtyInBase } = row
              if (qtyInBase === 0) return ['0%']
              const value = (Math.round(returnQtyInBase * 10000 / qtyInBase) / 100) + '%'
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'amountDiscount', title: '折扣额', align: 'right', width: 120 }
      ]
    }
  },
  watch: {
    'filterData': {
      handler(data) {
        this.getReprtData()
      },
      deep: true,
      immediate: true
    },
    'dataObj.catId': {
      handler(val) {
        this.getReprtData()
      }
    },
    'dataObj.isShowZero': {
      handler(val) {
        this.getReprtData()
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnMore(params) {
      const { skuId, name } = params.row
      const data = Object.assign({ skuId, skuName: name }, this.filterData)
      this.$router.push({
        name: 'ReportSaleDetailByGood',
        query: data
      })
    },
    btnSearch() {
      this.getReprtData()
    },
    initData() {
    },
    getReprtData() {
      const params = {
        page: this.pageInfo,
        data: Object.assign(clonedeep(this.filterData), clonedeep(this.dataObj))
      }
      this.setTableLoading('report', true)
      listSaleGroupByGoods(params).then(res => {
        this.setTableLoading('report', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('report', records)
        this.pageInfo.total = total
      })
    },
    onSizeChange() {},
    onCurrentChange() {}
  }
}
</script>

<style>

</style>
